<template>
    <div class="header">
        <div class="left">
            <div class="weather-box">
                <img :src="`https://img.cyeyi.com/databoard/weathers/${weatherCode}.png`" class="weather-icon">
                <div class="date">{{ date }}</div>
                <div class="fenge">
                    <div class="item"></div>
                    <div class="item"></div>
                </div>
                <div class="time">{{ time }}</div>
                <div class="fenge">
                    <div class="item"></div>
                    <div class="item"></div>
                </div>
                <div class="weekday">{{ weekday }}</div>
            </div>
        </div>
        <div class="title-box">
            <div class="title-inner-box">
                <div class="full-box">
                    <img src="https://img.cyeyi.com/databoard/images/arrow.svg" class="arrow-left">
                    <img src="https://img.cyeyi.com/databoard/images/logo.svg" class="logo">
                    <div class="shuxian"></div>
                    <div class="title">{{ title }}</div>
                    <img src="https://img.cyeyi.com/databoard/images/arrow.svg" class="arrow-right">
                </div>
            </div>
            <div class="line"></div>
            <img src="https://img.cyeyi.com/databoard/images/arrow-up.svg" class="arrow-up">
        </div>
        <div class="right">
            <div class="select-box">
                <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                <el-select v-model="province" placeholder="省" class="city-select-item" size="small" disabled
                    popper-class="select-item" @change="provinceChange">
                    <el-option v-for="item in provinces" :key="item.area_code" :label="item.area_name"
                        :value="item.area_code">
                    </el-option>
                </el-select>
            </div>
            <div class="select-box select-box2">
                <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                <el-select v-model="city" placeholder="市" class="city-select-item city-item" size="small" disabled
                    popper-class="select-item" @change="cityChange">
                    <el-option v-for="item in citys" :key="item.area_code" :label="item.area_name" :value="item.area_code">
                    </el-option>
                </el-select>
            </div>
            <div class="select-box select-box3">
                <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                <el-select v-model="area" placeholder="不限" class="city-select-item area-item" size="small"
                    popper-class="select-item" @change="areaChange">
                    <el-option v-for="item in areas" :key="item.area_code" :label="item.area_name" :value="item.area_code">
                    </el-option>
                </el-select>
            </div>
        </div>
        <img v-if="showLogOut" src="https://img.cyeyi.com/databoard/images/logout.svg" class="logout" @click="logout">
    </div>
</template>
  
<script>
import { getProvinceList, getCityList } from "@/api/customer";
import { userLogOut } from "@/api/customer";
import axios from "axios";
import store from '@/store';
export default {
    name: 'Header',
    props: {
        title: {
            type: String,
            default: '企业数据中心'
        },
        showLogOut: Boolean
    },
    data() {
        return {
            date: '',
            time: '',
            weekday: '',
            provinces: [],
            province: 27,
            citys: [],
            city: 233,
            areas: [],
            area: '',
            weatherCode: '101',
        };
    },
    mounted() {
        const info = store.getters['user/info'];
        if(info[0] && info[0].company_province_code) {
            this.province = info[0].company_province_code;
        }
        if(info[0] && info[0].company_city_code) {
            this.city = info[0].company_city_code;
        }
        this.timer = setInterval(this.updateTime, 1000);
        this.updateTime(); // 调用一次以确保当组件挂载时已经有日期和时间显示
        // this.getProvinceLists();
        // this.getCityLists();
        // this.getAreaLists();
        this.getWeather();
    },
    unmounted() {
        clearInterval(this.timer);
    },
    methods: {
        setProvinceLists(list) {
            this.provinces = list;
        },
        setCityLists(list) {
            this.citys = list;
        },
        setAreaLists(list) {
            this.areas = list;
        },
        updateTime() {
            const now = new Date();
            this.date = this.formatDate(now);
            this.time = now.toLocaleTimeString('zh-CN', { hour12: false });
            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            this.weekday = weekdays[now.getDay()];
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = ("0" + (date.getMonth() + 1)).slice(-2); // "0" 是为了保证月份始终为两位数
            const day = ("0" + date.getDate()).slice(-2);          // "0" 是为了保证日期始终为两位数 
            return `${year}年${month}月${day}日`;
        },
        async logout() {
            await userLogOut();
            this.$store.dispatch('user/clearToken');
            this.$store.dispatch('user/clearLoginInfo');
            location.reload();
        },
        async getProvinceLists() {
            const { result } = await getProvinceList();
            this.provinces = result;
        },
        async getCityLists() {
            const { result } = await getCityList({
                area_code: this.province
            });
            this.citys = result;
        },
        async getAreaLists() {
            const { result } = await getCityList({
                area_code: this.city
            });

            this.areas = [{
                "area_code": '',
                "area_name": "不限"
            }].concat(result);
        },
        provinceChange(e) {
            this.city = '';
            this.area = '';
            this.areas = [];
            this.getCityLists();
            this.$emit('addressChange');
        },
        cityChange(e) {
            this.area = '';
            this.getAreaLists();
            this.$emit('addressChange');
        },
        areaChange(e) {
            this.$emit('addressChange');
        },
        getCode() {
            return {
                provinceCode: this.province,
                cityCode: this.city,
                areaCode: this.area,
            }
        },
        changeArea(code) {
            this.area = code
        },
        getWeather() {
            axios('https://www.mxnzp.com/api/weather/current/%E8%A5%BF%E5%AE%89%E5%B8%82?app_id=etkrwrpptdithtxu&app_secret=WnZvZ0pqOC9UVkgxY2RqeFJCUCtaZz09').then((res) => {
                if(res.data && res.data.data && res.data.data.weather) {
                    this.weatherCode = this.getWeatherCode(res.data.data.weather);
                }
            })
        },
        getWeatherCode(weatherName) {
            const weatherMap = {
                '晴': 100,
                '多云': 101,
                '少云': 102,
                '晴间多云': 103,
                '阴': 104,
                '有风': 200,
                '平静': 201,
                '微风': 202,
                '和风': 203,
                '清风': 204,
                '强风/劲风': 205,
                '疾风': 206,
                '大风': 207,
                '烈风': 208,
                '风暴': 209,
                '狂爆风': 210,
                '飓风': 211,
                '龙卷风': 212,
                '热带风暴': 213,
                '阵雨': 300,
                '强阵雨': 301,
                '雷阵雨': 302,
                '强雷阵雨': 303,
                '雷阵雨伴有冰雹': 304,
                '小雨': 305,
                '中雨': 306,
                '大雨': 307,
                '极端降雨': 308,
                '毛毛雨/细雨': 309,
                '暴雨': 310,
                '大暴雨': 311,
                '特大暴雨': 312,
                '冻雨': 313,
                '小到中雨': 314,
                '中到大雨': 315, '大到暴雨': 316,
                '暴雨到大暴雨': 317,
                '大暴雨到特大暴雨': 318,
                '雨': 399,
                '小雪': 400,
                '中雪': 401,
                '大雪': 402,
                '暴雪': 403,
                '雨夹雪': 404,
                '雨雪天气': 405,
                '阵雨夹雪': 406,
                '阵雪': 407,
                '薄雾': 500,
                '雾': 501,
                '霾': 502,
                '扬沙': 503,
                '浮尘': 504,
                '沙尘暴': 507,
                '强沙尘暴': 508,
                '热': 900,
                '冷': 901,
                '未知': 999
            };

            // 将输入的天气名称转换为对应的天气代码（如果存在）
            const code = weatherMap[weatherName];
            if (code !== undefined) {
                return code;
            } else {
                return '999';
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.header {
    width: 100%;
    height: 10vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .left {
        width: 25.1%;
        height: 100%;

        .weather-box {
            height: 3.05vh;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 2.4vh;

            .weather-icon {
                height: 100%;
            }

            .date {
                margin-left: 0.78vw;
                // font-size: 1.48vh;
                font-size: 0.75vw;
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                -webkit-background-clip: text;
                // -webkit-text-fill-color: transparent;
            }

            .fenge {
                width: 2px;
                height: 1.2vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                margin: 0 0.31vw;

                .item {
                    width: 2px;
                    height: 0.5vh;
                    background: linear-gradient(180deg, #27A3FF 0%, #0152D9 100%);
                    opacity: 1;
                    border: 1px solid #0152D9;
                }
            }

            .time {
                font-size: 0.75vw;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                -webkit-background-clip: text;
                // -webkit-text-fill-color: transparent;
            }

            .weekday {
                font-size: 0.75vw;
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                color: #FFFFFF;
                -webkit-background-clip: text;
                // -webkit-text-fill-color: transparent;
            }
        }
    }

    .title-box {
        width: 44.8%;
        height: 100%;
        background-image: url(https://img.cyeyi.com/databoard/images/header.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        position: relative;

        .title-inner-box {
            width: 80%;
            height: 5.37vh;
            position: absolute;
            left: 50%;
            top: 2vh;
            transform: translateX(-50.4%);

            .full-box {
                width: 100%;
                height: 100%;
                position: relative;

                .arrow-left {
                    position: absolute;
                    left: 0;
                    width: 2.55vw;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
                }

                .arrow-right {
                    position: absolute;
                    right: 0;
                    width: 2.55vw;
                    -webkit-transform: scaleX(-1) translateY(50%);
                    transform: scaleX(-1) translateY(50%);
                }

                .logo {
                    width: 7.3vw;
                    position: absolute;
                    left: 6.82vw;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
                }

                .shuxian {
                    position: absolute;
                    left: 15.677vw;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
                    width: 1px;
                    height: 1.76vh;
                    background: linear-gradient(180deg, #FFFFFF 0%, #7EC2FF 100%);
                    border-radius: 0px 0px 0px 0px;
                    opacity: 1;
                }

                .title {
                    font-size: 3.61vh;
                    font-family: PingFang SC;
                    font-weight: 600;
                    line-height: 3.61vh;
                    letter-spacing: 2px;
                    background-image: linear-gradient(180deg, #FFFFFF 0%, #91AFFF 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    position: absolute;
                    left: 17.34vw;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
                }
            }


        }

        .line {
            width: 75.56%;
            height: 8px;
            background: linear-gradient(90deg, rgba(118, 154, 255, 0.8) 0%, #C9D7FF 50%, rgba(118, 154, 255, 0.8) 100%);
            border-radius: 5px 5px 5px 5px;
            opacity: 1;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-48.18%);
        }

        .arrow-up {
            width: 1.13vw;
            position: absolute;
            left: 48.75%;
            bottom: 1.57vh;
        }
    }

    .right {
        width: 26.7%;
        height: 100%;
        display: flex;
        flex-direction: row;
        padding-left: 3.85vw;
        padding-top: 2vh;

        .select-box {
            position: relative;
            width: 200px;

            .left-top {
                width: 1vw;
                position: absolute;
                left: -0.22vw;
                top: -0.22vw;
            }

            .left-bottom {
                width: 1vw;
                position: absolute;
                left: -0.22vw;
                bottom: -0.22vw;
            }

            .right-top {
                width: 1vw;
                position: absolute;
                right: -0.22vw;
                top: -0.22vw;
            }

            .right-bottom {
                width: 1vw;
                position: absolute;
                right: -0.22vw;
                bottom: -0.22vw;
            }
        }

        .select-box,
        .city-select-item {
            width: 4.8vw;
            height: 2.96vh;
        }

        .select-box {
            position: relative;
        }

        .select-box2 {
            left: 0.52vw;
        }

        .select-box3 {
            left: 1.04vw;
        }

        .select-box3,
        .area-item {
            width: 6.46vw;
        }
    }

    .logout {
        width: 1.09vw;
        position: absolute;
        top: 2.5vh;
        right: 3.16vw;
        cursor: pointer;
    }
}

::v-deep {
    .city-select-item {
        .el-input__inner {
            background: rgba(58, 98, 255, 0.12);
            box-shadow: inset 0px 0px 2.2vh 0px rgba(21, 75, 224, 0.32), inset 0px 0px 1vh 0px #517FFF;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            border: 1px solid #154BE0;
            filter: blur(0px);
            font-size: 1.4vh;
            font-family: PingFang SC;
            font-weight: 400;
            color: #fff;
            height: 2.96vh;
        }

        .el-input__suffix {
            height: 110%;
            right: 0.27vw;
        }

        .el-input__icon {
            font-size: 1.4vh !important;
        }

        .el-input.is-disabled .el-input__inner {
            background-color: transparent;
            border: none;
        }
    }

}
</style>
  